<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>Cool Bookmark</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/static/style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" title="yellow" href="/static/yellow.css" />
<link rel="stylesheet" type="text/css" title="blue" href="/static/blue.css" />
<link rel="stylesheet" type="text/css" title="green" href="/static/green.css" />
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/styleswitch.js"></script>
<script type="text/javascript" src="/static/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="/static/js/slide.noconflict.js"></script>
<script type="text/javascript" src="/static/js/glide.noconflict.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".Navi ul").lavaLamp({
		fx: "backout", 
		speed: 700,
		click: function(event, menuItem) {
			return true;
		}
	});

	$("#vote").find("a").click(function(){	    
		$("#vote").hide();
		$("#voting").show();
        $.post("/bookmark/vote", {bookmarkid:{{bookmark.id}}, stars:$(this).html()}, function(data) {
            $("#vote").show();
            $("#voting").hide();
            if (data == "You have voted.") {
                alert(data);
            } else {
                $("#starsrate").attr("style", "width:" + data + "%")
            }
        });
    });
	
});
</script>
</head>
<body>
	
<div id="wrapper">	
  <div id="header"> <span class="absolute box_1_t_l"></span> <span class="absolute box_1_t_r"></span> <span class="absolute box_1_b_l"></span> <span class="absolute box_1_b_r"></span>
    <h1 class="logo"><a href="/">Cool Bookmark</a></h1>
    <p><strong>A very cool bookmark for you</strong></p>
    <div class="login">
     {% if user %} 
        <b>{{ user|escape }}</b> | <a href="{{ logout_url }}">Sign Out</a>
     {% else %}
        <a href="{{ login_url }}">Sign In</a>
     {% endif %}
    </div>
  </div>
  <div class="Navi"> <span class="absolute box_1_t_l"></span> <span class="absolute box_1_t_r"></span> <span class="absolute box_1_b_l"></span> <span class="absolute box_1_b_r"></span>
    <ul>
      <li class="page_item page-item-21"><a href="/">Bookmark</a></li>
      <li class="page_item page-item-25"><a href="/admin">Admin</a></li>
      <li class="page_item page-item-26"><a href="/about">About the site</a></li>
    </ul>
  	<form action="/search" method="post">
      <button type="submit">Search</button>
      <input type="text" name="s" id="s" />
    </form>
    <div class="style"> <strong>Change color</strong> <span class="styleswitch yellowButton" rel="yellow"></span> <span class="styleswitch GreenButton" rel="green"></span> <span class="styleswitch blueButton" rel="blue"></span> </div>
  </div>

    <!-- BEGIN tag container -->
    <div id="tag_container">
    	<span class="absolute box_1_t_l"></span> <span class="absolute box_1_t_r"></span>
      <div id="tag_list" >
        {% for tag in tags  %}<span class="tag_item"><a class="tag_color{{tag.tagindex}}" href="/tag/{{tag.id}}">&nbsp;&nbsp;{{tag.name}}</a></span>{% endfor %}
      </div>
      <span class="absolute box_1_b_l"></span> <span class="absolute box_1_b_r"></span>
    </div>
    <!-- END tag container -->
  <div id="stage" class="clearfix">
    <div class="content">      
      <div id="bookmark{{bookmark.id}}" class="post"> <span class="absolute box_2_t_l"></span> <span class="absolute box_2_t_r"></span> <span class="absolute box_2_b_l"></span> <span class="absolute box_2_b_r"></span>
        <h2><a href="/bookmark/{{bookmark.id}}">{{bookmark.name}}</a></h2>
        <p class="a">
        <span class="date">{{bookmark.createtime|timezone:8|date:"Y-m-d H:i:s"}}</span> 
        <span class="category">Categorized Under: <a href="/category/{{bookmark.category.id}}">{{bookmark.category.name}}</a></span> 
        <span class="comments"><a href="/bookmark/{{bookmark.id}}#infocomment">{% if bookmark.comments %}{{bookmark.comments}}{% else %} 0 {% endif %} Commented</a></span>
        <span class="tag">Tags: {% for tag in bookmark.tags %}<a href="/tag/s/{{tag}}">{{tag}}</a> {% endfor %}</span>
        </p>
        <div class="details">
          <div id = "vote">
          <ul class="star-rating">
				<li id="starsrate" class="current-rating" style="width:{{bookmark.starrate}}%">Currently 5/5 Stars.</li>
				<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
				<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
				<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
				<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
				<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
			</ul>
		  </div>
		  <div id = "voting" style="display:none">Please waiting... </div>
          <a href="{{bookmark.url}}">          
          <img src="/bookmark/image/{{bookmark.id}}"></img></a>          			
          {{bookmark.description}}
          {% if bookmark.zipcontent %}
          <div class="snapshot">          
          <a target="new" href="/bookmark/snapshot/{{bookmark.id}}"><img src="/static/images/snapshot.jpg"></img></a>
          </div>
          {% endif %}
        </div>
      </div>
      <div id="infocomment" class="infocomment"> <span class="absolute box_2_t_l"></span> <span class="absolute box_2_t_r"></span> <span class="absolute box_2_b_l"></span> <span class="absolute box_2_b_r"></span>
      {% for comment in comments %}
        <dl>
          <dt><strong>{{comment.owner}} </strong> Wrote: {{ comment.createtime|timezone:8|date:"Y-m-d H:i:s" }}</dt>
          <dd>{{ comment.content }}</dd>
        </dl>
      {% endfor %}
      </div>
      <div id="addcomment" class="infocomment"> <span class="absolute box_2_t_l"></span> <span class="absolute box_2_t_r"></span> <span class="absolute box_2_b_l"></span> <span class="absolute box_2_b_r"></span>
        <form id="addcomment" name="myform" method="post" action="/bookmark/addcomment">
        <ul>
            <li>
                <input type="hidden" name="id" id="id" value="{{ bookmark.id }}" />
            <label for="content">Content: </label>
            <textarea name="content" cols="45" rows="4" class="comm_area" id="content"></textarea><br>
            <label for="checkcode">Checkcode: </label> <input type="text" name="checkcode" id="checkcode" maxlength="4" size="5"/> <img src="/checkcode"></img>
          </li>
          <li class="middle">
            <input name="submit" type="submit" class="btn01" value="Submit">                
          </li>
        </ul>
        </form>
      </div>
      <!-- /post-nav -->
    </div>
    <div class="sidebar">

      <div class="mob"> <span class="absolute box_2_t_l"></span> <span class="absolute box_2_t_r"></span> <span class="absolute box_2_b_l"></span> <span class="absolute box_2_b_r"></span>
        <h2>Categories</h2>
        <ol>
          {% for category in categorys %}<li><a href="/category/{{category.id}}">{{category.name}}({{category.bookmarkcount}})</a></li>{% endfor %}
        </ol>
      </div>
      <div class="mob"> <span class="absolute box_2_t_l"></span> <span class="absolute box_2_t_r"></span> <span class="absolute box_2_b_l"></span> <span class="absolute box_2_b_r"></span>
        <h2>Archives</h2>
        <ul>
          <li><a href="#">January 2009</a></li>
          <li><a href="#">December 2008</a></li>
        </ul>
      </div>
      <div class="mob"> <span class="absolute box_2_t_l"></span> <span class="absolute box_2_t_r"></span> <span class="absolute box_2_b_l"></span> <span class="absolute box_2_b_r"></span>
        <h2>Subscribe</h2>
        <ul>
          <a href="/rss"><img src="/static/images/subscribe.gif"></img>Subscribe via RSS Feed</a>
        </ul>
      </div>      

    </div>
  </div>
</div>
{% include "footer.html" %}
